<template>
	<view class="container">
		<block v-if="isload">
			<map v-if="worker_order.status==1 || worker_order.status==2" class="map" :longitude="worker.longitude" :latitude="worker.latitude" scale="15" minScale="11"
					maxScale="20" :polyline="polyline" :markers="[
			{
				id:0,
				title: '用户位置',
				latitude:worker_order.latitude2,
				longitude:worker_order.longitude2,
				iconPath: '/static/peisong/marker_kehu.png',
				width:'44',
				height:'54'
			},{
				id:1,
				title: '师傅位置',
				callout: callout,
				latitude:worker.latitude,
				longitude:worker.longitude,
				iconPath: '/static/peisong/marker_worker.png',
				width:'44',
				height:'54'
			}]"></map>
			<view v-else class="ordertop flex"
				:style="'background:url('+pre_url+'/static/img/orderbg.png);background-size:100%'">
				<view class="f1 " v-if="detail.status==0">
					<view class="t1">等待买家付款</view>
					<view class="t2" v-if="djs">剩余时间：{{djs}}</view>
				</view>
				<!-- <view class="f1" v-if="worker_order.status==0 && detail.refund_status==0">
					<block v-if="!worker_order.worker_id">
						<view class="t2">我们会尽快为您派单</view>
					</block>
					<block v-else>
						<view class="t2">订单已接单</view>
					</block>
				</view> -->
				
				<view class="f1" v-if="worker_order.status==0">
					<view class="t1">订单已派单</view>
				</view>
				<view class="f1" v-if="worker_order.status==1">
					<view class="t1">师傅已接单</view>
				</view>
				<view class="f1" v-if="worker_order.status==2">
					<view class="t1">师傅已上门</view>
				</view>
				<view class="f1" v-if="worker_order.status>=3">
					<view class="t1">已完成</view>
				</view>
				<!-- <view class="f1" v-if="worker_order.status==4">
					<view class="t1">已完成</view>
				</view> -->
				<view class="f1" v-if="worker_order.status==-4">
					<view class="t1">订单已派单</view>
				</view>
				<view class="f1" v-if="worker_order.status==-1">
					<view class="t1">订单已取消</view>
				</view>
				<view class="orderx">
					<image :src="pre_url+'/static/img/orderx.png'">
				</view>
			</view>
			
			<view class="orderinfo orderinfotop" v-if="worker_order.status==1 || worker_order.status==2">
				<view class="title">师傅已接单</view>
				<view class="item" style="align-items: center;justify-content: center;">
					<!-- <image :src="worker.headimg" background-size="cover" style="width: 100rpx;height: 100rpx;" />
					 -->
					 <image src="https://ksdaojiajia.com/mp-weixin/static/peisong/worker.png" background-size="cover" style="width: 100rpx;height: 100rpx;" />
					<text class="t2" @tap="call" :data-tel="worker.tel">{{worker.realname}}({{worker.tel}})</text>
				</view>
			</view>
			
			<view v-if="worker_order.status==1 || worker_order.status==2" class="orderinfotop"></view>
			<view v-else class="orderinfotop1"></view>
			<view class="orderinfo">
				<view class="title">订单信息</view>
				<view class="item">
					<text class="t1">订单编号</text>
					<text class="t2" user-select="true" selectable="true">{{detail.ordernum}}</text>
				</view>
				<view class="item">
					<text class="t1">下单时间</text>
					<text class="t2">{{detail.createtime}}</text>
				</view>
							<view class="item">
				<text class="t1">预约时间</text>
				<text class="t2">{{detail.yy_time}}</text>
			</view>
			</view>
			<view class="orderinfo" v-if="(detail.formdata).length > 0">
			<view>
				备注：
			</view>
				<view class="item" v-for="item in detail.formdata" :key="index">
					<text class="t1">{{item[0]}}</text>
					<view class="t2" v-if="item[2]=='upload'">
						<image :src="item[1]" style="width:400rpx;height:auto" mode="widthFix" @tap="previewImage"
							:data-url="item[1]" />
					</view>
					<text class="t2" v-else user-select="true" selectable="true">{{item[1]}}</text>
				</view>
			</view>

			<!-- <view class="btitle flex-y-center" v-if="detail.bid>0" @tap="goto" :data-url="'/pagesExt/business/index?id=' + detail.bid">
			<image :src="detail.binfo.logo" style="width:36rpx;height:36rpx;"></image>
			<view class="flex1" decode="true" space="true" style="padding-left:16rpx">{{detail.binfo.name}}</view>
		</view> -->
			<view class="product">
				<view class="title">服务信息</view>
				<view class="content">
					<view @tap="goto" :data-url="'product?id=' + prolist.proid">
						<image :src="prolist.propic" style="border-radius: 15rpx;"></image>
					</view>
					<view class="detail">
						<text class="t1">{{prolist.proname}}</text>
						<view class="t2 flex flex-y-center flex-bt">
							<text>{{prolist.ggname}}</text>
							<view class="btn3" v-if="detail.status>=3 && prolist.iscomment==0" @tap.stop="goto"
								:data-url="'comment?oid=' + prolist.id">去评价</view>
							<view class="btn3" v-if="detail.status>=3 && prolist.iscomment==1" @tap.stop="goto"
								:data-url="'comment?oid=' + prolist.id">查看评价</view>
						</view>
						<view class="t3"><text class="x1 flex1">￥{{prolist.product_price}}</text><text
								class="x2">×{{prolist.num}}</text></view>
						<!-- <view class="t4 flex flex-x-bottom">
						<view class="btn3" v-if="detail.status==3 && prolist.iscomment==0" @tap.stop="goto" :data-url="'comment?oid=' + prolist.id">去评价</view>
						<view class="btn3" v-if="detail.status==3 && prolist.iscomment==1" @tap.stop="goto" :data-url="'comment?oid=' + prolist.id">查看评价</view>
					</view> -->
					</view>
				</view>
			</view>

			<view class="orderinfo"
				v-if="(detail.status==3 || detail.status==2) && (detail.freight_type==3 || detail.freight_type==4)">
				<view class="item flex-col">
					<text class="t1" style="color:#111">发货信息</text>
					<text class="t2" style="text-align:left;margin-top:10rpx;padding:0 10rpx" user-select="true"
						selectable="true">{{detail.freight_content}}</text>
				</view>
			</view>


			<view class="orderinfo">

				<view class="item">
					<text class="t1">应付金额</text>
					<text class="t2 red">¥{{detail.product_price}}</text>
				</view>
				<view class="item" v-if="detail.leveldk_money > 0">
					<text class="t1">{{t('会员')}}折扣</text>
					<text class="t2 red">-¥{{detail.leveldk_money}}</text>
				</view>
				<view class="item" v-if="detail.manjian_money > 0">
					<text class="t1">满减活动</text>
					<text class="t2 red">-¥{{detail.manjian_money}}</text>
				</view>
				<view class="item" v-if="detail.freight_type==1 && detail.freightprice > 0">
					<text class="t1">服务费</text>
					<text class="t2 red">+¥{{detail.freight_price}}</text>
				</view>
				<view class="item" v-if="detail.freight_time">
					<text class="t1">{{detail.freight_type!=1?'配送':'提货'}}时间</text>
					<text class="t2">{{detail.freight_time}}</text>
				</view>
				<view class="item" v-if="detail.coupon_money > 0">
					<text class="t1">{{t('优惠券')}}抵扣</text>
					<text class="t2 red">-¥{{detail.coupon_money}}</text>
				</view>

				<view class="item" v-if="detail.scoredk > 0">
					<text class="t1">{{t('积分')}}抵扣</text>
					<text class="t2 red">-¥{{detail.scoredk_money}}</text>
				</view>

				<view class="item">
					<text class="t1">实付款</text>
					<text class="t2 red">¥{{detail.totalprice}}</text>
				</view>

				<view class="item">
					<text class="t1">订单状态</text>
					<text class="t2" v-if="detail.status==0">未付款</text>
					<text class="t2" v-if="detail.status==1">已付款</text>
					<text class="t2" v-if="detail.status==2">已派单</text>
					<text class="t2" v-if="detail.status>=3">已完成</text>
					<!-- <text class="t2" v-if="detail.status==4">已完成</text> -->
					<text class="" v-if="detail.refundCount"
						style="margin-left: 8rpx;">有退款({{detail.refundCount}})</text>
				</view>
				<view class="item" v-if="detail.refund_status>0">
					<text class="t1">退款状态</text>
					<text class="t2 red" v-if="detail.refund_status==1">审核中,¥{{detail.refund_money}}</text>
					<text class="t2 red" v-if="detail.refund_status==2">已退款,¥{{detail.refund_money}}</text>
					<text class="t2 red" v-if="detail.refund_status==3">已驳回,¥{{detail.refund_money}}</text>
				</view>

				<view class="item" v-if="detail.balance_price>0">
					<text class="t1">尾款</text>
					<text class="t2 red">¥{{detail.balance_price}}</text>
				</view>
				<view class="item" v-if="detail.balance_price>0">
					<text class="t1">尾款状态</text>
					<text class="t2" v-if="detail.balance_pay_status==1">已支付</text>
					<text class="t2" v-if="detail.balance_pay_status==0">未支付</text>
				</view>
				<view class="item" v-if="detail.status>0 && detail.paytypeid!='4' && detail.paytime">
					<text class="t1">支付时间</text>
					<text class="t2">{{detail.paytime}}</text>
				</view>
				<view class="item" v-if="detail.paytypeid">
					<text class="t1">支付方式</text>
					<text class="t2">{{detail.paytype}}</text>
				</view>

				<view class="item" v-if="detail.status>1 && detail.send_time">
					<text class="t1">派单时间</text>
					<text class="t2">{{detail.send_time}}</text>
				</view>
				<view class="item" v-if="detail.status>1 && detail.addmoney>0">
					<text class="t1">补差价</text>
					<text class="t2 red">￥{{detail.addmoney}}</text>
				</view>
				<view class="item" v-if="detail.status==3 && detail.collect_time">
					<text class="t1">完成时间</text>
					<text class="t2">{{detail.collect_time}}</text>
				</view>
			</view>

			<view class="orderinfo">
				<view class="title">
					<block v-if="!detail.carid">
						顾客信息
					</block>
					<block v-else>
						<block v-if="detail.fwtype==2">
							上门服务
						</block>
						<block v-else>
							到店服务
						</block>
					</block>
				</view>
				<view class="item">
					<text class="t1">姓名</text>
					<text class="t2">{{detail.linkman}}</text>
				</view>
				<view class="item">
					<text class="t1">手机号</text>
					<text class="t2">{{detail.tel}}</text>
				</view>

				<block v-if="!detail.carid">
					<view class="item" v-if="detail.fwtype==2">
						<text class="t1">上门地址</text>
						<text class="t2">{{detail.area}} {{detail.address}}</text>
					</view>
				</block>
				<block v-else>
					<block v-if="detail.fwtype==2">
						<view class="item">
							<text class="t1">车辆位置</text>
							<text class="t2">{{detail.area}}</text>
						</view>
						<view class="item">
							<text class="t1">停靠位置</text>
							<text class="t2">{{detail.address}}</text>
						</view>
					</block>
					<view class="item">
						<text class="t1">车辆信息</text>
						<text
							class="t2">{{detail.car_number}}.{{detail.car_color}}.{{detail.car_type==1?'SUV':detail.car_type==2?'MPV':'轿车'}}</text>
					</view>
				</block>
			</view>
			<view class="orderinfo">
				<view class="title">店铺信息</view>
				<view class="item">
					<text class="t1">店铺名称</text>
					<text class="t2">{{detail.binfo.name}}</text>
				</view>

				<view class="item">
					<text class="t1">店铺地址</text>
					<text class="t2">
						<text
							v-if="detail.binfo.province !='北京市' || detail.binfo.province !='上海市' || detail.binfo.province !='重庆市' || detail.binfo.province !='天津市' ">{{detail.binfo.province}}</text>
						{{detail.binfo.city}}{{detail.binfo.district}}{{detail.binfo.address}}</text>
				</view>
			</view>
			
			<!-- <view class="item" style="margin-bottom: 20rpx;">
				<view class="flex">
					<view class="form-imgbox" style="width: 33.3%;" v-for="(value, key) in over_thumb['necessary']" :key="key">
				
						<view class="form-imgbox-img" v-if="value != ''">
							<image class="delete_img" v-if="psorder.status!=3" @tap="removeimg(key)"
								src="https://ksdaojiajia.com/mp-weixin/static/img/ico-del.png">
								<image class="image" :src="value" @click="previewImage" :data-url="value" 
									mode="aspectFit" />
						</view>
						
						
						<view v-else class="form-uploadbtn"
							:style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'50rpx 50rpx',backgroundColor:'#F3F3F3'}"
							@click="editorChooseImage(key)" :data-oid="psorder.id"></view>
						<view style="text-align: center; margin-top: -20rpx;">
							<text style="color: red; ">{{key}}</text>
						</view>
						
					</view>
				</view>
			</view> -->
			
			<view class="orderinfo" v-if="detail.over_thumb && detail.status==3">
				<view class="title">完工图片：</view>
				<view class="" v-for="(items, index) in Array.from({ length: num }, (_, index) => index + 1)"
					:key="index">
					<view class="over_time_title">第{{index + 1}}台</view>
					<view class="item" style="margin-bottom: 20rpx;">
						<view class="flex">
							<view class="form-imgbox" style="" v-for="(value, key) in detail.over_thumb[index]['necessary']" :key="key">
								<view class="form-imgbox-img" v-if="value != ''">
										<image class="image" :src="value" @click="previewImage" :data-url="value" 
											mode="aspectFit" />
								</view>
				
								<view v-else class="form-uploadbtn"
									:style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'50rpx 50rpx',backgroundColor:'#F3F3F3'}"
									@click="editorChooseImage(key)"></view>
								<view style="text-align: center; margin-top: -20rpx;">
									<text style="color: red;">{{key}}</text>
								</view>
								
							</view>
						</view>
				
					</view>
					<view class="t1">其他图片：</view>
					
					<view class="item">
						<view class="flex">
							<view class="form-imgbox">
								<view class="form-imgbox-img" style="float: left;" v-for="(item, index1) in detail.over_thumb[index]['order_img']" :key="index1">
									<image class="image" :src="item" @click="previewImage" :data-url="item" width="150rpx" height="150rpx"
										mode="aspectFit" />
								</view>
								
								<view class="form-uploadbtn" style="float: left;"
									:style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'50rpx 50rpx',backgroundColor:'#F3F3F3'}"
									@click="editorChooseImage_other" ></view>
							</view>
							
							
						</view>
					</view>
				</view>
			</view>

			<view style="width:100%;height:120rpx"></view>
			
			<view class="bottom">
				<view style="text-align: center;width: 20%;" v-if="worker && worker_order.status!=0 && worker.tel" @tap="call" :data-tel="worker.tel">
					<image src="https://ksdaojiajia.com/mp-weixin/static/peisong/tel1.png" class="img" />
					<view>联系师傅</view>
				</view>
				<view style="width:1rpx;background: #505050;height: 70%;"></view>
				<view style="text-align: center;width: 20%;"  @tap="call" :data-tel="kf_tel">
					<image src="https://ksdaojiajia.com/mp-weixin/static/peisong/tel2.png" class="img" />
					<view>联系客服</view>
				</view>
				<view v-if="mid==orderinfo.mid && worker_order.worker_id>0 && worker_order.status>=3" class="btn1" @tap="goto" :data-url="'commentps?id='+worker_order.id">评价师傅</view>
				<!-- <view v-if="detail.status==3" class="btn1" @tap="goto" :data-url="'commentdp?orderid=' + detail.id">查看评价</view> -->
			</view>


		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	var interval = null;

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				pre_url: app.globalData.pre_url,
				prodata: '',
				djs: '',
				iscommentdp: "",
				detail: "",
				payorder: {},
				prolist: "",
				storeinfo: "",
				lefttime: "",
				codtxt: "",
				pay_transfer_info: {},
				invoice: 0,
				selectExpressShow: false,
				express_content: '',
				worker: {},
				worker_order: {},
				kf_tel: '',
				polyline: [{
					points: [],
					color: '#FF0000DD', // 线的颜色，需要符合CSS颜色规范
					width: 2, // 线的宽度
					dottedLine: true, // 是否画虚线，默认为false
				}],
				scale: 14,
				orderinfo: {},
				callout: {
					color: '#000000', // 文本颜色
					bgColor: '#ffffff', // 背景色
					display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
					fontSize: 13,
					textAlign: 'left', // 文本对齐方式。有效值: left, right, center
					padding: 10, // 文本边缘留白
					borderRadius: 5,
					content: '',
				},
				num: 0
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onUnload: function() {
			clearInterval(interval);
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get('ApiYuyue/orderdetail', {
					id: that.opt.id
				}, function(res) {
					that.loading = false;
					that.iscommentdp = res.iscommentdp,
					that.detail = res.detail;
					that.worker = res.worker;
					that.worker_order = res.worker_order;
					that.prolist = res.prolist;
					that.num = that.prolist['num'];
					if (res.detail['is_one_pic']) that.num = 1;
					
					that.storeinfo = res.storeinfo;
					that.lefttime = res.lefttime;
					that.codtxt = res.codtxt;
					that.pay_transfer_info = res.pay_transfer_info;
					that.payorder = res.payorder;
					that.invoice = res.invoice;
					if (res.binfo != undefined){
						that.kf_tel = res.binfo.tel;
					}
					if (res.lefttime > 0) {
						interval = setInterval(function() {
							that.lefttime = that.lefttime - 1;
							that.getdjs();
						}, 1000);
					}
					
					if (that.worker){
						var points = [];
						var cache = {};
						cache.longitude = that.worker.longitude;
						cache.latitude = that.worker.latitude;
						points.push(cache);
						cache = {};
						cache.longitude = that.worker_order.longitude2;
						cache.latitude = that.worker_order.latitude2;
						points.push(cache);
						that.polyline[0]['points'] = points;
						that.callout.content = '正在赶来！\n距您：'+that.worker_order.juli2 + that.worker_order.juli2_unit;
						
					}
					that.loaded();
				});
			},
			getdjs: function() {
				var that = this;
				var totalsec = that.lefttime;

				if (totalsec <= 0) {
					that.djs = '00时00分00秒';
				} else {
					var houer = Math.floor(totalsec / 3600);
					var min = Math.floor((totalsec - houer * 3600) / 60);
					var sec = totalsec - houer * 3600 - min * 60;
					var djs = (houer < 10 ? '0' : '') + houer + '时' + (min < 10 ? '0' : '') + min + '分' + (sec < 10 ?
						'0' : '') + sec + '秒';
					that.djs = djs;
				}
			},
			todel: function(e) {
				var that = this;
				var orderid = e.currentTarget.dataset.id;
				app.confirm('确定要删除该订单吗?', function() {
					app.showLoading('删除中');
					app.post('ApiYuyue/delOrder', {
						orderid: orderid
					}, function(data) {
						app.showLoading(false);
						app.success(data.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					});
				});
			},
			toclose: function(e) {
				var that = this;
				var orderid = e.currentTarget.dataset.id;
				app.confirm('确定要关闭该订单吗?', function() {
					app.showLoading('提交中');
					app.post('ApiYuyue/closeOrder', {
						orderid: orderid
					}, function(data) {
						app.showLoading(false);
						app.success(data.msg);
						setTimeout(function() {
							that.getdata();
						}, 1000);
					});
				});
			},
			orderCollect: function(e) {
				var that = this;
				var orderid = e.currentTarget.dataset.id;
				app.confirm('确定已完成服务吗?', function() {
					app.showLoading('确认中');
					app.post('ApiYuyue/orderCollect', {
						orderid: orderid
					}, function(data) {
						app.showLoading(false);
						app.success(data.msg);
						setTimeout(function() {
							that.getdata();
						}, 1000);
					});
				});
			},
			showhxqr: function() {
				this.$refs.dialogHxqr.open();
			},
			closeHxqr: function() {
				this.$refs.dialogHxqr.close();
			},
			openLocation: function(e) {
				var latitude = parseFloat(e.currentTarget.dataset.latitude);
				var longitude = parseFloat(e.currentTarget.dataset.longitude);
				var address = e.currentTarget.dataset.address;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: address,
					scale: 13
				})
			},
			openMendian: function(e) {
				var storeinfo = e.currentTarget.dataset.storeinfo;
				app.goto('/pages/shop/mendian?id=' + storeinfo.id);
			},
			logistics: function(e) {
				var express_com = e.currentTarget.dataset.express_com
				var express_no = e.currentTarget.dataset.express_no
				app.goto('/activity/yuyue/logistics?express_no=' + express_no);
			},
			hideSelectExpressDialog: function() {
				this.$refs.dialogSelectExpress.close();
			},
			call: function(e) {
				var tel = e.currentTarget.dataset.tel;
				uni.makePhoneCall({
					phoneNumber: tel
				});
			}
		}
	};
</script>
<style>
	.text-min {
		font-size: 24rpx;
		color: #999;
	}

	.ordertop {
		width: 100%;
		height: 452rpx;
		padding: 50rpx 0 0 70rpx;
		justify-content: space-between;
	}

	.ordertop .f1 {
		color: #fff
	}

	.ordertop .f1 .t1 {
		font-size: 40rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.ordertop .f1 .t2 {
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.orderinfotop {
		position: relative;
		/* margin-top: -200rpx; */
		padding-bottom: -220rpx;
	}
	.orderinfotop1 {
		position: relative;
		margin-bottom: -220rpx;
	}

	.address {
		display: flex;
		width: 100%;
		padding: 20rpx 3%;
		background: #FFF;
	}

	.address .img {
		width: 40rpx
	}

	.address image {
		width: 40rpx;
		height: 40rpx;
	}

	.address .info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.address .info .t1 {
		font-size: 28rpx;
		font-weight: bold;
		color: #333
	}

	.address .info .t2 {
		font-size: 24rpx;
		color: #999
	}

	.product {
		width: 96%;
		margin: 0 2%;
		border-radius: 8rpx;
		margin-top: 16rpx;
		padding: 14rpx 3%;
		background: #FFF;
	}

	.product .content {
		display: flex;
		position: relative;
		width: 100%;
		padding: 16rpx 0px;
		border-bottom: 1px #e5e5e5 dashed;
	}

	.product .content:last-child {
		border-bottom: 0;
	}

	.product .content image {
		width: 140rpx;
		height: 140rpx;
	}

	.product .content .detail {
		display: flex;
		flex-direction: column;
		margin-left: 14rpx;
		flex: 1
	}

	.product .content .detail .t1 {
		font-size: 26rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product .content .detail .t2 {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.product .content .detail .t3 {
		display: flex;
		color: #ff4246;
		margin-top: 10rpx;
	}

	.product .content .detail .t4 {
		margin-top: 10rpx;
	}

	.product .content .detail .x1 {
		flex: 1
	}

	.product .content .detail .x2 {
		width: 100rpx;
		font-size: 32rpx;
		text-align: right;
		margin-right: 8rpx
	}

	.product .content .comment {
		position: absolute;
		top: 64rpx;
		right: 10rpx;
		border: 1px #ffc702 solid;
		border-radius: 10rpx;
		background: #fff;
		color: #ffc702;
		padding: 0 10rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	.product .content .comment2 {
		position: absolute;
		top: 64rpx;
		right: 10rpx;
		border: 1px #ffc7c2 solid;
		border-radius: 10rpx;
		background: #fff;
		color: #ffc7c2;
		padding: 0 10rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	.orderinfo {
		width: 96%;
		margin: 0 2%;
		border-radius: 8rpx;
		margin-top: 16rpx;
		padding: 14rpx 3%;
		background: #FFF;
		
	}

	.orderinfo .title, .product .title {
		font-weight: bold;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-bottom: 15rpx;
	}

	.orderinfo .item {
		display: flex;
		width: 100%;
		padding: 20rpx 0;
		border-bottom: 1px dashed #ededed;
		overflow: hidden
	}

	.orderinfo .item:last-child {
		border-bottom: 0;
	}

	.orderinfo .item .t1 {
		width: 200rpx;
		flex-shrink: 0
	}

	.orderinfo .item .t2 {
		flex: 1;
		text-align: right
	}

	.orderinfo .item .t3 {
		margin-top: 3rpx;
	}

	.orderinfo .item .red {
		color: red
	}

	.btn1 {
		flex: 1;
		background: linear-gradient(-90deg, #06A051 0%, #03B269 100%);
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		text-align: center;
		font-size: 32rpx
	}

	.btn2 {
		margin-left: 20rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		background: #fff;
		border: 1px solid #cdcdcd;
		border-radius: 3px;
		text-align: center;
	}

	.btn3 {
		font-size: 24rpx;
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #333;
		background: #fff;
		border: 1px solid #cdcdcd;
		border-radius: 3px;
		text-align: center
	}

	.btitle {
		width: 100%;
		height: 100rpx;
		background: #fff;
		padding: 0 20rpx;
		border-bottom: 1px solid #f5f5f5
	}

	.btitle .comment {
		border: 1px #ffc702 solid;
		border-radius: 10rpx;
		background: #fff;
		color: #ffc702;
		padding: 0 10rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	.btitle .comment2 {
		border: 1px #ffc7c0 solid;
		border-radius: 10rpx;
		background: #fff;
		color: #ffc7c0;
		padding: 0 10rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	.hxqrbox {
		background: #fff;
		padding: 50rpx;
		position: relative;
		border-radius: 20rpx
	}

	.hxqrbox .img {
		width: 400rpx;
		height: 400rpx
	}

	.hxqrbox .txt {
		color: #666;
		margin-top: 20rpx;
		font-size: 26rpx;
		text-align: center
	}

	.hxqrbox .close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		margin-left: -25rpx;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		padding: 8rpx
	}

	.orderx image {
		width: 124rpx;
		height: 124rpx;
		margin-right: 60rpx;
	}
	
	.flex {
		flex-wrap: wrap;
	}
	
	.form-imgbox {
		font-size: 24rpx;
	}
	
	.form-imgbox-close {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		right: -16rpx;
		top: -16rpx;
		color: #999;
		font-size: 32rpx;
		background: #fff
	}
	
	.form-imgbox-img {
		display: block;
		margin: 30rpx;
		width: 150rpx;
		height: 150rpx;
		border: #d3d3d3 1px solid;
	}
	
	.image {
			margin: 0 auto;
	/* 		max-width: 150rpx;
			max-height: 150rpx; */
			height: 150rpx;
			width: 150rpx;
			float: left;
			padding: 5rpx;
		}
		
		.delete_img {
			/* float: right; */
			/* right: 0; */
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			margin-left: 110rpx;
			/* margin-top: -5rpx; */
			/* top: 5rpx; */
			z-index: 1;
		
		}
		
	.map {
		width: 100%;
		height: 500rpx;
		overflow: hidden
	}
	
	.img {
		width: 44rpx;
		height: 44rpx;
		text-align: center;
	}
	
	.bottom {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		align-items: center;
		height: 100rpx;
	}
	
	.over_time_title {
		text-align: center;
		background-color: #999;
		font-size: 35rpx;
		border-radius: 20rpx;
		color: #fff;
	}
</style>